/**
 * create by Alec
 */
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { createForm } from "rc-form";
import autobind from "autobind-decorator";

// components
import Box from "../../components/Box/box";

// utils
import { set } from "../../utils/db";
import { openLink } from '../../utils/dingtalk.js'


const BoxItem = Box.Item;
const mapper = {
    'entry': '入职', 
    'dimission': '离职', 
    'transferIn': '调入', 
    'transferOut': '调出',
    'totalTransfer': '调岗',
    'totalBeRegular': '转正'
}
//将store注入组件的props
const mapStateToProps = () => ({});
//将action与dispatch进行绑定并注入组件的props
const mapDispatchToProps = dispatch => ({
    //区分绑定到props的action与传递的props
    actions: bindActionCreators(
        {
            dispatch,
        },
        dispatch
    )
});

@connect(mapStateToProps, mapDispatchToProps)
class PersonnelChange extends Component {
    static defaultProps = {};
    //propTypes 验证
    static propTypes = {
        actions: PropTypes.shape({
            dispatch: PropTypes.func.isRequired,
        })
    };
    constructor(props) {
        super(props);
        this.state = {};
    }
    /**
     * 点击跳转
     * @param {*跳转路径} url 
     */
    @autobind
    linkTo(url, num) {
        const { currentDate = '', query } = this.props.urlParam || {};
        const { deptId = '' } = query || {};
        const { navList } = this.props.count || {};
        const { period = 'week' } = this.props;
        if(!num || num === 0) {
            return;
        }
        set("navList", navList);
        openLink(`#/statisticList?change=${url}&currentDate=${currentDate}&deptId=${deptId}&period=${period}`)
    }
    render() {
        const { count, changeList = [] } = this.props || {};
        const { dimissionExplainVO, expiryDateRange } = count || {};
        const { dimissionRatio, industry, compareValue, industryDimissionRatio } = dimissionExplainVO || {};
        const list = changeList.map((item, index) => {
            return (
                <div key={index}>
                    {
                        (item.value >= 0) &&
                        <BoxItem text={item.value} 
                            linkText={mapper[item.label]} 
                            onClick={() => {
                                window._rlog(`_stat_to_${item.label}`);
                                this.linkTo(item.label, item.value)} 
                            }
                        />
                    }
                </div>
            )
        })
        const more = (industry && compareValue && industryDimissionRatio) ? 'lh' : '';
        return (
            <div className="personnel-change">
                <div className="title">
                    <i></i>
                    员工人数变动
                </div>
                <div className="number">
                    <Box cols={4}>
                        {list}
                    </Box>
                </div>

                {
                     ((industry && compareValue && dimissionRatio) || (industryDimissionRatio && industry)) &&
                     <div className={"ratio " + more}>
                        {
                            (industry && compareValue && dimissionRatio) &&
                            <p>
                                {
                                    compareValue === '相同'
                                    ? <span>
                                        离职率<span className="radio-dimission">{dimissionRatio}</span>，
                                        与{industry}行业的离职率平均水平持平
                                    </span>
                                    : <span>
                                        离职率<span className="radio-dimission">{dimissionRatio}</span>，
                                        {compareValue}{industry}行业的离职率平均水平({industryDimissionRatio}) ——数据由第三方机构提供
                                    </span>
                                }
                            
                            </p>
                        }

                        {/*
                            (industryDimissionRatio && industry) &&
                            <p>
                                {industry}行业平均离职率<span className="ratio-dimission">{industryDimissionRatio}</span>（数据由第三方机构提供）
                            </p>
                        */}
                    </div>
                }
            </div>
        );
    }
}
export default createForm()(PersonnelChange);
